<template>
  <a-drawer
    :label-col="4"
    :visible="open"
    :wrapper-col="14"
    width="35%"
    @close="onClose">
    <template slot="title">
      <b>{{ formTitle }}</b>
    </template>
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-form-model-item :colon="false" extra="学号用于账号进行系统登陆" label="学号" prop="userName">
        <a-input v-model="form.userName" placeholder="请输入学号" />
      </a-form-model-item>

      <a-form-model-item :colon="false" label="姓名" prop="nickName">
        <a-input v-model="form.nickName" placeholder="请输入姓名" />
      </a-form-model-item>

      <a-form-model-item :colon="false" label="手机" prop="phonenumber">
        <a-input v-model="form.phonenumber" placeholder="请输入手机号码" />
      </a-form-model-item>

      <a-form-model-item :colon="false" label="性别" prop="sex">
        <a-radio-group v-model="form.sex" button-style="solid">
          <a-radio-button v-for="(d, index) in sexOptions" :key="index" :value="d.dictValue">{{
            d.dictLabel
          }}
          </a-radio-button>
        </a-radio-group>
      </a-form-model-item>

      <a-form-model-item :colon="false" label="班级" prop="classId">
        <a-tree-select
          v-model="form.classId"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :replaceFields="replaceFields"
          :tree-data="classOptions"
          :value="value"
          placeholder="请选择班级"
          style="width: 100%"
          tree-default-expand-all
        >
        </a-tree-select>
      </a-form-model-item>

      <a-form-model-item :colon="false" label="专业" prop="specialtyId">
        <a-select v-model="form.specialtyId" allow-clear placeholder="请选择专业" style="width: 100%">
          <a-select-option v-for="(d, index) in specialtyOptions" :key="index" :value="d.postId">
            {{ d.postName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item :colon="false" label="备注" prop="remark">
        <a-input v-model="form.remark" allow-clear placeholder="请输入内容" type="textarea" />
      </a-form-model-item>

      <div class="bottom-control">
        <a-space>
          <a-button type="primary" @click="submitForm">
            保存
          </a-button>
          <a-button type="dashed" @click="cancel">
            取消
          </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { getStudent, addStudent, updateStudent } from '@/api/platform/student'

export default {
  name: 'CreateForm',
  props: {
    classOptions: {
      type: Array,
      required: true
    },
    specialtyOptions: {
      type: Array,
      required: true
    },
    sexOptions: {
      type: Array,
      required: true
    }
  },
  components: {},
  data () {
    return {
      replaceFields: { children: 'children', title: 'label', key: 'id', value: 'id' },
      value: undefined,
      loading: false,
      formTitle: '',
      // 表单参数
      form: {
        studentId: undefined,
        userId: undefined,
        deptId: undefined,
        classId: undefined,
        specialtyId: undefined,
        userName: undefined,
        nickName: undefined,
        phonenumber: undefined,
        sex: undefined,
        remark: undefined
      },
      // 1增加,2修改
      formType: 1,
      open: false,
      rules: {
        classId: [
          { required: true, message: '班级不能为空', trigger: 'change' }
        ],
        specialtyId: [
          { required: true, message: '专业不能为空', trigger: 'change' }
        ],
        userName: [
          { required: true, message: '学号不能为空', trigger: 'change' }
        ],
        nickName: [
          { required: true, message: '姓名不能为空', trigger: 'change' }
        ],
        phonenumber: [
          { required: true, message: '手机不能为空', trigger: 'change' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请正确填写手机号',
            trigger: 'change'
          }
        ]
      }
    }
  },
  filters: {},
  created () {

  },
  computed: {},
  watch: {},
  mounted () {
  },
  methods: {
    onClose () {
      this.open = false
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset () {
      this.formType = 1
      this.form = {
        studentId: undefined,
        userId: undefined,
        deptId: undefined,
        classId: undefined,
        specialtyId: undefined,
        userName: undefined,
        nickName: undefined,
        phonenumber: undefined,
        sex: undefined,
        remark: undefined
      }
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset()
      if (this.classOptions.length > 0) {
        this.form.classId = this.classOptions[0].deptId
      }
      if (this.specialtyOptions.length > 0) {
        this.form.specialtyId = this.specialtyOptions[0].postId
      }
      if (this.sexOptions.length > 0) {
        this.form.sex = '2'
      }
      this.formType = 1
      this.open = true
      this.formTitle = '添加学生'
    },
    /** 修改按钮操作 */
    handleUpdate (row, ids) {
      this.reset()
      this.formType = 2
      const studentId = row ? row.studentId : ids
      getStudent(studentId).then(response => {
        this.form = response.data
        this.open = true
        this.formTitle = '修改学生'
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.studentId !== undefined && this.form.studentId !== null) {
            updateStudent(this.form).then(response => {
              this.$message.success(
                '修改成功',
                3
              )
              this.open = false
              this.$emit('ok')
            })
          } else {
            addStudent(this.form).then(response => {
              this.$message.success(
                '新增成功',
                3
              )
              this.open = false
              this.$emit('ok')
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
